{extend name="layout/base"}

{block name="link"}
<link rel="stylesheet" href="/static/common/editormd/css/editormd.css" />
{/block}

{block name="title"}文章修改{/block}
{block name="main"}
<div class="right-main">
    <div class="mdui-card border-1 mdui-shadow-0 mdui-m-b-2 ">
        <div class="mdui-card-primary">
            <h3>文章修改</h3>
        </div>
        <div class="mdui-divider "></div>
        <div class="mdui-card-content">
            <form class="layui-form " action="">
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">预览</label>
                    <div>
                        <img class="pic_url" src="{$article.pic}" height="200px" />
                    </div>
                </div>

                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">缩略图</label>
                    <div class="layui-inline">
                        <input type="text" name="pic" id="pic_url" placeholder="不上传就留空" autocomplete="off"
                            class="mdui-textfield-input">
                    </div>
                    <button type="button" class="mdui-btn border-1" id="pic">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>

                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">简介</label>
                    <textarea class="mdui-textfield-input" name="desc" rows="4"
                        placeholder="请输入文章简介">{$article.desc}</textarea>
                </div>

                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">标题</label>
                    <input value="{$article.title}" type="text" name="title" placeholder="" autocomplete="off"
                        class="mdui-textfield-input">
                </div>

                <div>
                    <label class="mdui-textfield-label">分类</label>
                    <select class="" name="category_id" id="select">
                        {foreach $categorys as $key=>$vo}
                        <option value="{$vo.id}" {if $vo.id eq $article.id}selected{/if}>{$vo.name}</option>
                        {/foreach}
                    </select>
                </div>

                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">内容</label>
                    <div id="editor" class="layui-input-block" style="width:1000px;">
                        <textarea style="display:none;" name="content">{$article.content}
                        </textarea>
                    </div>
                </div>

                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">Tag</label>
                    <input value="{$article.tag}" type="text" name="tag" placeholder="用 | 隔开" autocomplete="off"
                        class="mdui-textfield-input">
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">是否置顶</label>
                    <input type="checkbox" value="1" name="top" lay-text="开启|关闭" lay-skin="switch" {if $article.top eq 1} checked {/if}>
                </div>
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">是否显示</label>
                    <input type="checkbox" value="1" name="state" lay-text="开启|关闭" lay-skin="switch" {if $article.state eq 1} checked {/if}>
                </div>
                <div class="mdui-textfield">
                    <button class="mdui-btn border-1" lay-submit lay-filter="submit">立即提交</button>
                </div>
                <input type="hidden" name="_method" value="PUT">
            </form>

        </div>

    </div>
</div>

{/block}
{block name="script"}

<script src="/static/common/editormd/editormd.js"></script>
<script>

    $(function () {
        var editor = editormd("editor", {
            width: "92%",
            height: "500px",
            path: "/static/common/editormd/lib/"
        });
    });

    layui.use(['form', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        upload.render({
            elem: '#pic' //绑定元素
            , url: "/admin/upload" //上传接口
            , done: function (res) {
                //上传完毕回调
                if (res.code == 1) {
                    $("#pic_url").val(res.url);
                    $(".pic_url").attr("src", res.url);
                } else {
                    layer.msg(res.info, function () {
                    })
                }
            }, error: function () {
                layer.msg("上传异常");
            }
        });

        form.on('submit(submit)', function (data) {
            // layer.load({time: 0});
            $.post('/admin/article/{$article.id}', data.field, function (res) {
                // layer.closeAll('loading');
                if (res.code === 1) {
                    layer.msg(res.msg, {icon: 1, shade: 0.5, }, () => {
                        location.href = res.url
                    });
                } else {
                    layer.msg(res.msg, {icon: 2, shade: 0.5, time: 2000, shadeClose: true});
                }
            })
            return false;
        });

    });
</script>
{/block}
